<template>
  <div>


    <el-carousel :interval="4000" type="card" height="200px" style="background: #F2F8FE">
      <el-carousel-item v-for="item in imageList" :key="item.address">
        <img :src="item.address">
      </el-carousel-item>
    </el-carousel>
    <br>
    <el-container>
      <div style="float: left;width: 25%;">
        <!--左边栏空白占位  -->
      </div>
<!--      <el-cascader-panel :options="options" style="width: 19%;background: #F2F8FE;"></el-cascader-panel>-->
      <div style="float: left;width: 50%;">
        <el-input placeholder="查询商品" v-model="selectd" class="input-with-select" size="1000px">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <p style="color: #BFBFBF;">
          <span>热门搜索：</span>
          <a href="">虾</a>
          <a href="">鱿鱼</a>
          <a href="">生蚝</a>
          <a href="">大龙虾</a>
          <a href="">鲍鱼</a>
          <a href="">海参</a>
        </p>

      </div>
    </el-container>

    <br>
    <div>
      <el-container >
        <div style="float: left;width: 10%;background-color: #DCDFE6;">
          <!--左边栏空白占位  -->
        </div>
        <div style="float: left;width: 80%;">
              <div class="card"  v-for="(item, index) in goodsList" :key="item.id" v-on:mouseenter="showDialog(index)" v-on:mouseleave="hideDialog(index)">
                  <div class="ribbon">
                    <!--鼠标移入移出事件-->
                    <div class="handleDialog" v-if="ishow && index==current">
                      <el-button type="success" style="margin-left:25%;margin-top: 70%;" size="medium" @click="goGoodsDesc(item)">查看详情</el-button>
                      <el-button type="warning" icon="el-icon-star-off" circle size="medium" @click="goCollection(item)"></el-button>
                    </div>
                    <img :src="item.img" style="height: 100%;width: 100%">
                    <div class="wrap"><span class="ribbon6" style="color:#000;"><span style="color: #F2F8FE">京东双十一狂欢{{item.id}}号</span></span>
                  </div>
                </div>
                <div style="text-align:center">
                  <span>{{item.name}}</span>
                  <span>&yen;{{item.prize}}</span>
                  <span>{{item.desc}}</span>
                </div>
              </div>
        </div>
        <div style="float: left;width: 10%;background-color: #DCDFE6;">
          <!--右边栏空白占位  -->
        </div>

      </el-container>
      <br>
      <center>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </center>
    </div>
  </div>
</template>

<script>
  export default {
      name: "index",
      data() {
        return {
          ishow: false,
          current: 0,
          selectd: '',
          currentDate: new Date(),
          imageList:[
            {id:1,title:"test1", address:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2013319254,3446577563&fm=26&gp=0.jpg"},
            {id:2,title:"test2", address:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2013319254,3446577563&fm=26&gp=0.jpg"},
            {id:3,title:"test3", address:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2013319254,3446577563&fm=26&gp=0.jpg"},
            {id:4,title:"test4", address:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2013319254,3446577563&fm=26&gp=0.jpg"},
            {id:5,title:"test5", address:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2013319254,3446577563&fm=26&gp=0.jpg"},
            {id:6,title:"test6", address:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2013319254,3446577563&fm=26&gp=0.jpg"},
          ],
          goodsList:[
            {id:1,name:"去内脏八爪鱼 鲜活冷冻小八爪鱼", img:"https://img13.360buyimg.com/n7/jfs/t1/156044/37/8082/528791/601369c2E3e5ab1f1/cdc30c8f82d78b1e.jpg",prize:"59.00",desc:"地点海鲜店"},
            {id:2,name:"大虾", img:"https://img12.360buyimg.com/n7/jfs/t1/168477/39/21159/927428/6087c649E0ac7ebce/b87f6b39346eb746.png",prize:"299.00 ",desc:"地点海鲜店"},
            {id:3,name:"生蚝", img:"https://img10.360buyimg.com/n7/jfs/t1/165716/40/8134/85143/603c9652E77fda091/0976d6bbe082167a.jpg",prize:"566.00",desc:"地点海鲜店"},
            {id:4,name:"鲍鱼", img:"https://img13.360buyimg.com/n7/jfs/t1/159892/21/21901/351097/61553123E1550393b/f3067dff3e5c37e5.jpg",prize:"599.00",desc:"地点海鲜店"},
            {id:5,name:"螃蟹", img:"https://img11.360buyimg.com/n7/jfs/t1/210975/30/12250/220125/61b5568fEecacd998/8ed61e1cf548b943.jpg",prize:"218.00",desc:"地点海鲜店"},

            {id:6,name:"麻辣即食海鲜罐头", img:"https://img11.360buyimg.com/n7/jfs/t1/196718/36/6054/554214/60b83074E41e15cb5/768686f765a944b6.jpg",prize:"399.00",desc:"地点海鲜店"},
            {id:7,name:"冷冻大扇贝", img:"https://img12.360buyimg.com/n7/jfs/t1/177885/13/8823/232314/60c46620E789f9111/47091becf8d40056.jpg",prize:"29.00",desc:"地点海鲜店"},
            {id:8,name:"鱿鱼", img:"https://img10.360buyimg.com/n7/jfs/t1/203909/3/11896/171262/616e8e1dE24e26511/88ac50534519ce2b.jpg",prize:"319.00",desc:"地点海鲜店"},
            {id:9,name:"海鲜罐头", img:"https://img14.360buyimg.com/n7/jfs/t1/152180/5/17714/293513/602f61bdEf84f8fef/01e2db429fa634ff.jpg",prize:"269.00",desc:"地点海鲜店"},
            {id:10,name:"即食螃蟹", img:"https://img12.360buyimg.com/n7/jfs/t1/170993/28/26436/213641/61a9802dE285d7262/fd2b626dec2a2dc4.jpg",prize:"499.00",desc:"地点海鲜店"},

            {id:11,name:"青岛大海螺", img:"https://img11.360buyimg.com/n7/jfs/t1/84791/37/18214/233209/613f0e37Ef2d54ba5/3c3022b521fab96f.jpg",prize:"178.00",desc:"地点海鲜店"},
            {id:12,name:"大龙虾", img:"https://img11.360buyimg.com/n7/jfs/t1/119028/3/5272/308926/5eb27c20E4fe9f3a0/3d8ce72b5a80d6ba.jpg",prize:"99.00",desc:"TP-地点海鲜店"},
            {id:13,name:"庐山生蚝", img:"https://img10.360buyimg.com/n7/jfs/t1/198340/12/15463/161811/617f816cEa3868497/915637bbdb73c323.jpg",prize:"99.00",desc:"地点海鲜店"},

          ]
        };
      },
      methods:{
        //前往商品收藏界面
        goCollection(goods){
          console.log(goods)
          this.$router.push({
            path:'/collection',
            query:{
              tableDataOne:goods
            }
          });
        },
        //前往商品详情页
        goGoodsDesc(goods) {
          this.$router.push({
            path:'/goodsDesc',
            query:{
              goods:goods
            }
          });
        },
        //显示操作项
        showDialog(index, item) {
          this.ishow = true;
          this.current = index;
        },
        //隐藏蒙层
        hideDialog(index, item) {
          this.ishow = false;
          this.current = null;
        }
      }
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  /**
  隐藏页
  */
  .handleDialog {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
  }


  /**
  卡片
   */

  .card{
    height: 350px;
    width: 266px;
    margin-left: 30px;
    margin-top: 30px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 4px;
    float: left;
  }
  .card img {
    width: 100%;
    height: 70%;
  }
  .card span {
    font-size: 15px;
    color: #BFBFBF;
    display: block;
    letter-spacing: 2px;
    /*padding: 0px 20px;*/
  }
/**
丝带
 */

  .ribbon {
    display: inline-block;
    width: 100%;
    height: 70%;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: cover;
    text-transform: uppercase;
    color: white;
  }

  .wrap {
    width: 100%;
    height: 188px;
    position: absolute;
    top: -8px;
    left: 8px;
    overflow: hidden;
  }
  .wrap:before {
    content: "";
    display: block;
    border-radius: 8px 8px 0px 0px;
    width: 40px;
    height: 8px;
    position: absolute;
    right: 100px;
    background: #4D6530;
  }
  .wrap:after {
    content: "";
    display: block;
    border-radius: 0px 8px 8px 0px;
    width: 8px;
    height: 40px;
    position: absolute;
    right: 0px;
    top: 100px;
    background: #4D6530;
  }
  .ribbon6 {
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 40px;

    line-height: 40px;
    position: absolute;
    top: 30px;
    right: -50px;
    z-index: 2;
    overflow: hidden;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    border: 1px dashed;
    box-shadow: 0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
    background: #57DD43;
  }
</style>
